import React, { Component } from 'react';
import styles from './message.module.less';
import {Tag} from 'antd';
import { Link,Outlet} from 'react-router-dom';

export const Message = () =>{
    
    return (
        <>
    <Link to="/article">
        <div className={styles.container}>
            <div className={styles.titleList}>
                <div className={styles.touxiang}>
                    <img src="https://assets.leetcode-cn.com/aliyun-lc-upload/uploaded_files/2021/03/73c9f099-abbe-4d94-853f-f8abffd459cd/leetcode.png?x-oss-process=image%2Fresize%2Ch_44%2Cw_44%2Fformat%2Cwebp" alt="" />
                </div>
                <div className={styles.title}>如何在[求职面试中]发布一篇帖子?</div>
                <Tag color="#f5f6f8" style={{color:"#55acee",marginLeft:'20px'}}>置顶</Tag>
                <Tag color="#def1d4" style={{color:"#5ab726"}}>官方</Tag>
                <Tag color="#ffecd1" style={{color:"#ffb119"}}>推荐</Tag>
            </div>
            <div className={styles.tags}>
                <Tag color="#f2f3f4" style={{color:"#80868e",marginLeft:"15px",marginTop:"5px"}}>版规</Tag>
            </div>
            <div className={styles.answer}>
            为了更好地让大家看到你宝贵的面经和经验分享，我们为大家提供了一些关于如何在「求职面试」中发布一篇帖子的建议，快速掌握正确发帖姿势。
            为了更好地让大家看到你宝贵的面经和经验分享，我们为大家提供了一些关于如何在「求职面试」中发布一篇帖子的建议，快速掌握正确发帖姿势。
            为了更好地让大家看到你宝贵的面经和经验分享，我们为大家提供了一些关于如何在「求职面试」中发布一篇帖子的建议，快速掌握正确发帖姿势。
            </div>
            <div className={styles.icons}>
                <div className={styles.good}>
                    <svg t="1639565651163" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2057" width="16" height="16"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="2058" fill="#2c2c2c"></path></svg>
                </div>
                <div className={styles.good}>
                    <svg t="1639565953884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4448" width="16" height="16"><path d="M426.410667 772.096c0.170667-114.602667 0.597333-304.981333 0.597333-304.981333 0-12.544 3.754667-24.917333 10.837333-35.925334l109.312-169.045333c1.28-1.962667 0.938667-5.034667 3.328-5.034667 22.357333 0 13.482667 54.784-3.072 106.410667-13.056 29.354667-12.373333 62.634667 4.181334 90.709333 18.517333 31.488 38.314667 51.114667 75.605333 51.114667h125.013333c17.408 0 30.464 15.957333 27.050667 33.024l-37.376 185.514667c-7.338667 32-24.405333 48.042667-32 48.042666H426.410667v0.170667z" fill="#64EDAC" p-id="4449"></path><path d="M880.128 430.506667c-16.384-19.968-41.045333-31.402667-67.754667-31.402667H631.893333c22.784-70.058667 41.472-163.498667 3.328-216.32-12.288-16.981333-35.925333-37.205333-78.762666-37.205333-55.808 0-80.128 30.464-98.645334 58.965333L348.501333 373.418667c-5.290667 8.192-9.813333 16.810667-13.653333 25.6H232.362667c-35.669333 0-64.853333 28.330667-66.218667 63.658666l-39.936 300.970667-0.256 4.522667c0 60.842667 49.493333 110.336 110.336 110.336h473.6c63.744 0 118.357333-52.992 136.192-132.608l50.432-250.368c4.693333-22.954667-1.365333-46.677333-16.384-65.024z m-643.84 379.733333c-22.613333 0-41.045333-17.834667-42.069333-40.192l40.106666-302.592 85.589334-0.256v342.954667l-83.626667 0.085333z m593.322667-328.192l-50.346667 249.685333c-10.325333 46.250667-38.826667 78.506667-69.376 78.506667H388.266667c0.085333-103.424 0.597333-343.210667 0.597333-343.296 0-19.797333 5.888-39.338667 16.981333-56.490667l109.312-168.96c15.104-23.381333 21.674667-27.733333 41.301334-27.733333 16.896 0 21.504 6.314667 23.466666 8.96 15.530667 21.504 10.410667 83.541333-12.8 154.88a60.928 60.928 0 0 0 2.474667 57.429333c11.690667 19.882667 33.792 32.256 57.685333 32.256H812.373333c6.058667 0 11.690667 2.389333 14.933334 6.4 2.133333 2.645333 2.901333 5.461333 2.304 8.362667z" fill="#333C4F" p-id="4450"></path></svg>
                    <svg t="1639566011023" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6481" width="16" height="16"><path d="M521.728 512m-474.112 0a474.112 474.112 0 1 0 948.224 0 474.112 474.112 0 1 0-948.224 0Z" fill="#040000" p-id="6482"></path><path d="M521.728 512m-432.64 0a432.64 432.64 0 1 0 865.28 0 432.64 432.64 0 1 0-865.28 0Z" fill="#F3C81E" p-id="6483"></path><path d="M125.610667 598.869333C125.610667 346.453333 330.24 141.824 582.656 141.824c97.962667 0 188.586667 30.890667 262.997333 83.285333C766.293333 135.68 650.752 79.36 521.728 79.36 282.794667 79.36 89.088 273.066667 89.088 512c0 74.922667 19.114667 145.408 52.565333 206.848-10.410667-38.229333-16.042667-78.506667-16.042666-119.978667z" fill="#F6D85E" p-id="6484"></path><path d="M351.744 391.338667m-63.488 0a63.488 63.488 0 1 0 126.976 0 63.488 63.488 0 1 0-126.976 0Z" fill="#040000" p-id="6485"></path><path d="M691.712 391.338667m-63.488 0a63.488 63.488 0 1 0 126.976 0 63.488 63.488 0 1 0-126.976 0Z" fill="#040000" p-id="6486"></path><path d="M271.36 605.354667c18.090667 128.170667 127.829333 226.816 260.949333 226.816s242.858667-98.645333 260.949334-226.816H271.36z" fill="#FFFFFF" p-id="6487"></path><path d="M532.309333 849.237333c-68.096 0-133.802667-24.746667-184.832-69.632-50.517333-44.373333-83.626667-105.472-93.013333-171.861333l-2.730667-19.456h561.322667l-2.730667 19.456c-9.386667 66.389333-42.325333 127.488-93.013333 171.861333-51.2 44.885333-116.906667 69.632-185.002667 69.632zM291.84 622.421333c24.917333 111.104 125.098667 192.682667 240.469333 192.682667s215.552-81.578667 240.469334-192.682667H291.84z" fill="#080103" p-id="6488"></path></svg>
                    68
                </div>
                <div className={styles.good}>
                   <svg t="1639566068118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7319" width="16" height="16"><path d="M515.2 224c-307.2 0-492.8 313.6-492.8 313.6s214.4 304 492.8 304 492.8-304 492.8-304S822.4 224 515.2 224zM832 652.8c-102.4 86.4-211.2 140.8-320 140.8s-217.6-51.2-320-140.8c-35.2-32-70.4-64-99.2-99.2-6.4-6.4-9.6-12.8-16-19.2 3.2-6.4 9.6-12.8 12.8-19.2 25.6-35.2 57.6-70.4 92.8-102.4 99.2-89.6 208-144 329.6-144s230.4 54.4 329.6 144c35.2 32 64 67.2 92.8 102.4 3.2 6.4 9.6 12.8 12.8 19.2-3.2 6.4-9.6 12.8-16 19.2C902.4 585.6 870.4 620.8 832 652.8z" p-id="7320"></path><path d="M512 345.6c-96 0-169.6 76.8-169.6 169.6 0 96 76.8 169.6 169.6 169.6 96 0 169.6-76.8 169.6-169.6C681.6 422.4 604.8 345.6 512 345.6zM512 640c-67.2 0-121.6-54.4-121.6-121.6 0-67.2 54.4-121.6 121.6-121.6 67.2 0 121.6 54.4 121.6 121.6C633.6 582.4 579.2 640 512 640z" p-id="7321"></path></svg>
                   10.6K
                </div>
                <div className={styles.good}>
                  <svg t="1639566161715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9837" width="16" height="16"><path d="M512 96C229.2 96 0 282.3 0 512c0 92.1 36.8 177.1 99.1 246 4.1 4.5 5.3 10.9 3.1 16.5-5.7 14.7-12 29.2-19 43.3-12.9 26.3-28.2 51.7-45.3 75.5-6.2 8.6-7.7 19.7-4.1 29.6 3.6 10 11.9 17.5 22.2 20.1 9.4 2.4 25.2 5.4 44.8 5.4 26 0 58.7-5.4 91.5-25 21.4-12.8 37.5-28.6 49.3-44 4.5-5.9 12.5-7.9 19.3-4.8 74.2 34 159.8 53.3 251 53.3 282.8 0 512-186.3 512-416S794.8 96 512 96z m321.7 660.5c-41.2 33.5-89.3 59.8-143.2 78.3C634.1 854.2 574 864 512 864s-122.1-9.8-178.5-29.2c-20.2-6.9-39.5-15-58-24l-0.6-0.3c-28.7-14.2-63.2-3.7-79.5 23.9-0.7 1.2-1.4 2.3-2.1 3.2-7.8 10.8-18.6 22-33.6 31-13.1 7.8-26.3 12.1-38.5 14.2 7-12 13.5-24.2 19.6-36.5 5.6-11.4 10.9-23 15.7-34.8 2.4-5.8 6-15.7 9.6-26 7.8-22.3 2.3-46.9-13.9-64.1l-0.3-0.3c-22.3-23.6-40.7-49.2-54.9-76.6-21.9-42.2-33-86.7-33-132.5s11.1-90.3 33-132.4c21.7-41.7 53.1-79.5 93.3-112.1 41.2-33.5 89.3-59.8 143.2-78.3C389.9 169.8 450 160 512 160s122.1 9.8 178.5 29.2c53.8 18.5 102 44.8 143.2 78.3 40.2 32.7 71.6 70.4 93.3 112.1 21.9 42.1 33 86.6 33 132.4 0 45.8-11.1 90.3-33 132.4-21.7 41.7-53.1 79.4-93.3 112.1z" p-id="9838"></path></svg>
                   42
                </div>
                <div className={styles.good}>
                  <svg t="1639566220203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10793" width="16" height="16"><path d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z" fill="#F2CB51" p-id="10794"></path></svg>
                   87
                </div>
            </div>
        </div>
    </Link>
    <Outlet/>
     </>
    )
}